<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prototype String Demo</title>

<link rel="stylesheet" href="mobile.css">
<link rel="stylesheet" href="css/prettify.css">

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/prettify.js"></script>

<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="widget.js"></script>

</head>
<body onload="myonLoad()">
<!-- below required for widgets -->
<!-- <embed type="application/x-systeminfo-widget" hidden="yes"></embed> -->
<h2>Prototype String Demo</h2>
<hr /><p></p>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="current">gsub</a></li>
<li><a href="#">gsub 2</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Escape</a></li>
</ul>
</div>
<div id="content">

<!-- TAB1 ---------------------------------->
<div id="tab1">
<p>
<input type="button" value="Test gsub" onclick="test_gsub();"/><br/> 
</p>
<hr />
<p>
<code class="prettyprint">
function test_gsub(){
  var s = 'prototype string extensions can help you';
  var snoopdogfy = /\b(\w+)t\w+\b/;
  var snooptalk = s.gsub(snoopdogfy, '#{1}tizzle' );
  alert(snooptalk); // shows: "prototizzle stizzle extizzle can help you"        
}
</code>
</p>
</div>

<!-- TAB2 ---------------------------------->
<div class="tab" id="tab2">
<p>
<input type=button value='test custom gsub' onclick='scamCustomers();' />
</p>
<hr />
<p>
<code class="prettyprint">
function scamCustomers(){
  var prices = 'book1 $12.5, magazine $5.50, pencil $1.20';
  var priceFinder = /\$([0-9\.]+)/;
  var r = prices.gsub(priceFinder, jackUp);
  alert(r);//shows: "book1 $13.75, magazine $6.05, pencil $1.32"
}
  
function jackUp(matches){
  //increases the prices by 10%
  var price = parseFloat(matches[1]);
     return '$' + Math.round(110 * price)/100;
}
</code>
</p>
</div>

<!-- TAB3 ---------------------------------->
<div class="tab">
<p>
<input type="button" value="Test String Template" onclick="printCart();"><br/> 
</p>
<hr />
<p>
<code class="prettyprint">
function printCart(){
  //creating a sample cart
  var cart = new Object();
  cart.items = [ ];
  //putting some sample items in the cart
  cart.items.push({product: 'Book 123', price: 24.50, quantity: 1});
  cart.items.push({product: 'Set of Pens', price: 5.44, quantity: 3});
  cart.items.push({product: 'Gift Card', price: 10.00, quantity: 4});
  
  //here we create our template for formatting each item
  var itemFormat = new Template(
      'You are ordering #{quantity} units ' + 
      'of #{product} at $#{price} each'
      );
  var formatted = '';
  
  for(var i=0; i&lt;cart.items.length; i++){
    var cartItem = cart.items[i];
    formatted += itemFormat.evaluate(cartItem) + '\n';
  }
  
  alert(formatted);
  /* SHOWS:
  You are ordering 1 units of Book 123 at $24.5 each
  You are ordering 3 units of Set of Pens at $5.44 each
  You are ordering 4 units of Gift Card at $10 each
  */
}
</code>
</p>
</div>

<!-- TAB4 ---------------------------------->
<div class="tab" id="tab4">
<p>
<input type=button value='test escapeHTML' onclick='testEscapeHTML();' />
<input type=button value='test unescapeHTML' onclick='testUnescapeHTML();' />
</p>
<hr />
<i>Press 'test escapeHTML' button first. </i><br />
<div id="aholder1">Holder1: <span id="holder1">This data will be replaced.</span></div>
<div id="aholder2">Holder2: <span id="holder2">This data will be replaced also.</span></div>
<hr />
<p>
<code class="prettyprint">
function testEscapeHTML()
{
  var data = "&lt;b&gt;Hello, world!&lt;/b&gt;";
  
  $('holder1').innerHTML = data;
  alert ($('holder1').innerHTML);
  $('holder2').innerHTML = data.escapeHTML();
  alert ($('holder2').innerHTML);
}

function testUnescapeHTML()
{
  var data1 = $('holder1').innerHTML;
  alert(data1.unescapeHTML());
  var data2 = $('holder2').innerHTML;
  alert(data2.unescapeHTML());
}
</code>
</p>
</div>


</body>
</html>
